<template>
  <div id="app" class="owner">
    <div class="h">
      <div class="wrapper">
        <div class="h-inner" :style="{backgroundImage: `url(${img})`}">
          <div class="h-user">
            <div class="h-info clearfix">
              <div class="avatar-container">
                <div>
                  <div class="bili-avatar" style="width: 60px;height:60px;">
                    <img
                      class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                      data-src
                      alt
                      :src="prefixUrl+user.userAvatar"
                    />
                    <span class="bili-avatar-icon bili-avatar-right-icon bili-avatar-size-60"></span>
                  </div>
                </div>
                <a target="_blank" href="#" class="avatar-cover">更换头像</a>
              </div>
              <div class="h-basic">
                <div>
                  <span id="h-name">{{user.userName}}</span>
                  <div :class="`${vip}`">大会员</div>
                </div>
                <div class="h-basic-spacing">
                  <h4 title class="h-sign" style="display: none;"></h4>
                  <input
                    id="h-sign"
                    type="text"
                    placeholder="编辑个性签名"
                    maxlength="60"
                    class="space_input"
                  />
                </div>
              </div>

              <div>
               
      <div v-if="this.subscribe.follow==='0' || this.subscribe.follow==='2'">
        <el-button @click="guanzhu()" class="guanzhu-btn">+ 关注</el-button>
      </div>
      <div v-if="this.subscribe.follow==='1' || this.subscribe.follow==='3'">
        <el-tooltip class="item" effect="dark" content="当前已关注该用户，点击即可取消关注！" placement="top">
          <el-button @click="cancelguanzhu()" class="cancel-btn">取消关注</el-button>
        </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="navigator" class="n">
      <div class="wrapper">
        <div class="n-inner clearfix">
          <div class="n-tab-links">
            <router-link :to="zhuyeUrl" class="n-btn n-index n-fans n-404">
              <span class="iconfont icon-ic_home"></span>
              <span class="n-text">主页</span>
            </router-link>
            <router-link :to="tougaoUrl" class="n-btn n-video n-audio n-article n-album">
              <span class="iconfont icon-ic_video"></span>
              <span class="n-text">投稿</span>
              <span class="n-num">{{user.totalUploads}}</span>
            </router-link>

            <router-link to="/person/shoucang" class="n-btn n-video n-audio n-article n-album">
              <span class="iconfont icon-ic_collect"></span>
              <span class="n-text">收藏</span>
              <span class="n-num">0</span>
            </router-link>
          </div>
          <div class="clearfix g-search search-container">
            <input type="text" placeholder="搜索视频、动态" class="space_input" />
            <span class="icon search-btn"></span>
          </div>
          <div class="n-statistics">
            <router-link :to="url_guanzhu" class="n-data n-gz" :title="user.totalUps">
              <p class="n-data-k">关注数</p>
              <p id="n-gz" class="n-data-v space-attention">{{user.totalUps}}</p>
            </router-link>
            <router-link :to="url_fans" class="n-data n-fs" :title="user.totalFans">
              <p class="n-data-k">粉丝数</p>
              <p id="n-fs" class="n-data-v space-fans">{{user.totalFans}}</p>
            </router-link>

            <div title="视频、动态、专栏累计获赞18" class="n-data n-bf">
              <p class="n-data-k">获赞数</p>
              <p id="n-bf" class="n-data-v">{{user.totalLikes}}</p>
            </div>
            <div title="截止昨天，播放数总计为891" class="n-data n-bf">
              <p class="n-data-k">播放数</p>
              <p id="n-bf" class="n-data-v">{{user.totalPlays}}</p>
            </div>
          </div>
        </div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import zhuye from "@/views/personal/zhuye";
export default {
  name: "person",
  data() {
    return {
      zhuyeUrl: "/person/zhuye/" + this.$route.params.userId,
      tougaoUrl: "/person/tougao/" + this.$route.params.userId,
      url_guanzhu: "/person/likeandfans/"+this.$route.params.userId+"/guanzhu",
      url_fans: "/person/likeandfans/"+this.$route.params.userId+"/fans",

      prefixUrl: "http://",
      img: require("@/assets/water.jpeg"),
      // 根据有无 disable来判断是否是vip
      vip: "h-vipType disable",

      user: "",
      subscribe:'',
    };
  },
  components: { zhuye },
  created() {
    this.getUserById();
    this.getRelateation();
  },
  methods: {
    getUserById() {
      this.$message.success(this.$route.params.userId);
      this.axios({
        method: "get",
        params: {
          id: this.$route.params.userId
        },
        url: "http://localhost:8090/user/get"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.user = res.data;
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },

    getRelateation() {

      this.axios({
        method: "get",
        params: {
          upId:  this.$route.params.userId
        },
        url: "http://localhost:8097/subscribe/getSubscribeByUpId"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据

          this.subscribe = res.data;
        })
        .catch(error => {
          console.log(
            "error in up.getRelateation",
            error.response.data.message
          );
        });

     
    },
    guanzhu() {
      this.axios({
        method: "post",
        params: {
          upId: this.$route.params.userId
        },
        url: "http://localhost:8097/subscribe/saveSubscribe"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          // res.data;
          this.getRelateation();
          this.$message.success("关注成功");
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },

    cancelguanzhu() {

      this.axios({
        method: "post",
        params: {
          upId: this.$route.params.userId
        },
        url: "http://localhost:8097/subscribe/cancelSubscribe"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
         this.getRelateation();
          this.$message.success("已取消关注");
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    }
  }
};
</script>
<style   scoped>
@import "//s1.hdslb.com/bfs/static/jinkela/space/css/space.8.c0fabcaff103fc18a767b3893014712762fd14a5.css";
</style>